var lines = new Array();
var circles = new Array();
var rectangles = new Array();
var images = new Array();
var all = new Array();
var move_x = 0;
var move_y = 0;
var img_index = 0;

$(document).ready(function() {
	img_button_bind("#open_img img", "imgs/open_img_button_normal.jpg", "imgs/open_img_button_hover.jpg", "imgs/open_img_button_active.jpg");
	img_button_bind("#clip_img img", "imgs/clip_img_button_normal.jpg", "imgs/clip_img_button_hover.jpg", "imgs/clip_img_button_active.jpg");
	img_button_bind("#more_color img", "imgs/more_color_normal.jpg", "imgs/more_color_hover.jpg", "imgs/more_color_active.jpg");
	img_button_bind("#clear img", "imgs/clear_canvas_normal.jpg", "imgs/clear_canvas_hover.jpg", "imgs/clear_canvas_active.jpg");
	img_button_bind("#confirm_open", "imgs/confirm_normal.jpg", "imgs/confirm_hover.jpg", "imgs/confirm_active.jpg");
	img_button_bind("#cancel_open", "imgs/cancel_normal.jpg", "imgs/cancel_hover.jpg", "imgs/cancel_active.jpg");
	img_button_bind("#move_img img", "imgs/move_img_normal.jpg", "imgs/move_img_hover.jpg", "imgs/move_img_active.jpg");
	img_button_bind("#scale_img img", "imgs/enlarge_img_normal.jpg", "imgs/enlarge_img_hover.jpg", "imgs/enlarge_img_active.jpg");
	img_button_bind("#rotate_img img", "imgs/rotate_img_normal.jpg", "imgs/rotate_img_hover.jpg", "imgs/rotate_img_active.jpg");
	img_button_bind(".operate_confirm", "imgs/confirm_normal.jpg", "imgs/confirm_hover.jpg", "imgs/confirm_active.jpg");
	img_button_bind(".operate_cancel", "imgs/cancel_normal.jpg", "imgs/cancel_hover.jpg", "imgs/cancel_active.jpg");
	img_button_click_bind();
	operate_img_button_bind();
	shape_click();
	color_box_bind();
	more_color_button_click();
	init_colors_table();
	shape_select_button_bind();
})

/**
 * 形状选择按钮的变化
 */
function shape_click() {
	$("#shape li img").click(function() {
		$('#shape li img').removeClass('selected_shape');
		$(this).addClass('selected_shape');
	})
}

/**
 * 绑定图片按钮的变化
 * @param id
 * @param normal_path
 * @param hover_path
 * @param active_path
 */
function img_button_bind(id, normal_path, hover_path, active_path) {
	$(id).hover(function() {
		$(this).attr("src", hover_path);
	}, function() {
		$(this).attr("src", normal_path);
	})
	
	$(id).mousedown(function() {
		$(this).attr("src", active_path);
	})
	
	$(id).mouseup(function() {
		$(this).attr("src", hover_path);
	})
}


function img_button_click_bind() {
	$("#open_img img").click(function() {
		var width = $(window).width();
		var height = $(document).height();
		$("#open_img_back").css({"width" : width, "height" : height, "visibility" : "visible"});
		$("#open_img_content").css("visibility", "visible");
	})
	
	$("#clip_img img").click(function() {
		clip_canvas_bind();
	})
	
	$("#clear img").click(clear_canvas);
	
	$("#confirm_open").click(function() {
		var image = new Image();
		var path = $("#path_text").attr("value");
		if(judge_valid_path(path)) {
			image.src = path;
			var img = new Img(0, 0);
			img.setImage(image);
			img.setWidth(image.width);
			img.setHeight(image.height);
			img.setHorizontal(image.width);
			img.setVertical(image.height);
			images[images.length] = img;
			all[all.length] = img;
			img.draw();
			init_img_item(images.length - 1);
			$("#open_img_back").css("visibility", "hidden");
			$("#open_img_content").css("visibility", "hidden");
		}
	})
	
	$("#cancel_open").click(function() {
		$("#open_img_back").css("visibility", "hidden");
		$("#open_img_content").css("visibility", "hidden");
	})
}

function judge_valid_path(path) {
	var isPic = false;
	var strs = path.split(".");
	var post = strs[strs.length - 1];
	if(post == "jpg" || post == "png" || post == "gif") {
		isPic = true;
	}
	return isPic;
}

/**
 * 颜色框鼠标事件处理 
 */
function color_box_bind() {
	$(".color_box").mouseover(function() {
		$(this).css('border', '1px solid white');
	})
	
	$(".color_box").mouseout(function() {
		$(this).css('border', '1px solid gray');
	})
	
	$(".color_box").click(function() {
		var color = $(this).css('background-color');
		$("#current_color").css('background-color', color);
	})
}

/**
 * 更多颜色按钮的事件处理 
 */
function more_color_button_click() {
	$("#more_color img").click(function() {
		var visibility = $("#colors").css('visibility');
		if (visibility == "hidden") {
			$("#colors").css('visibility', 'visible');
			color_box_bind();
		} else if (visibility == "visible") {
			$("#colors").css('visibility', 'hidden');
		} else {
		}
	})
}

/**
 * 载入更多色彩选择框 
 */
function init_colors_table() {
	var meta_colors = new Array();
	meta_colors[0] = "00";
	meta_colors[1] = "33";
	meta_colors[2] = "66";
	meta_colors[3] = "99";
	meta_colors[4] = "CC";
	meta_colors[5] = "FF";
	
	var table_html = "";
	var count = 0;
	
	for(var i = 0; i < 6; i++) {
		for(var j = 0; j < 6; j++) {
			for(var k = 0; k < 6; k++) {
				if (count % 9 == 0) {
					count = 0;
					table_html += "<tr>";
				}
				count++;
				table_html += "<td class='color_box' style='background-color: #" + meta_colors[i].toString() + meta_colors[j].toString() + meta_colors[k].toString() + "'></td>";
				if (count % 9 == 0) {
					table_html += "</tr>"
				}			
			}
		}
	}
	
	$("#colors_table").html(table_html);
}

/**
 * 清空画板
 */
function clear_canvas() {
	var canvas = document.getElementById("canvas_content");
	var context = canvas.getContext("2d");
	context.save();
	context.clearRect(0, 0, 1152, 648);
	context.restore();
	lines = new Array();
	circles = new Array();
	rectangles = new Array();
	images = new Array();
	all = new Array();
	$("option").remove();
}


function shape_select_button_bind() {
	$("#line_button").click(draw_line_bind);
	$("#circle_button").click(draw_circle_bind);
	$("#rectangle_button").click(draw_rectangle_bind);
}

/**
 * 图片操作的按钮的事件绑定 
 */
function operate_img_button_bind() {
	$("#move_img img").click(function() {
		var visibility = $("#select_move_img").css('visibility');
		if (visibility == "hidden") {
			$("#select_move_img").css('visibility', 'visible');
		} else if (visibility == "visible") {
			$("#select_move_img").css('visibility', 'hidden');
		} else {
		}
		$("#select_scale_img").css('visibility', 'hidden');
		$("#select_rotate_img").css('visibility', 'hidden');
	})
	
	$("#scale_img img").click(function() {
		var visibility = $("#select_scale_img").css('visibility');
		if (visibility == "hidden") {
			$("#select_scale_img").css('visibility', 'visible');
		} else if (visibility == "visible") {
			$("#select_scale_img").css('visibility', 'hidden');
		} else {
		}
		$("#select_move_img").css('visibility', 'hidden');
		$("#select_rotate_img").css('visibility', 'hidden');
	})
	
	$("#rotate_img img").click(function() {
		var visibility = $("#select_rotate_img").css('visibility');
		if (visibility == "hidden") {
			$("#select_rotate_img").css('visibility', 'visible');
		} else if (visibility == "visible") {
			$("#select_rotate_img").css('visibility', 'hidden');
		} else {
		}
		$("#select_move_img").css('visibility', 'hidden');
		$("#select_scale_img").css('visibility', 'hidden');
	})
	
	$("#move_confirm").click(function() {
		$('#shape li img').removeClass('selected_shape');
		$("#select_move_img").css('visibility', 'hidden');
		move_img_bind();
		img_index = $("#move_content").val();
	})
	
	$("#scale_confirm").click(function() {
		$('#shape li img').removeClass('selected_shape');
		$("#select_scale_img").css('visibility', 'hidden');
		scale_img_bind();
		img_index = $("#scale_content").val();
	})
	
	$("#rotate_confirm").click(function() {
		$('#shape li img').removeClass('selected_shape');
		$("#select_rotate_img").css('visibility', 'hidden');
		rotate_img_bind();
		img_index = $("#rotate_content").val();
	})
	
	$(".operate_cancel").click(function() {
		$("#select_move_img").css('visibility', 'hidden');
		$("#select_scale_img").css('visibility', 'hidden');
		$("#select_rotate_img").css('visibility', 'hidden');
	})
}

/**
 * 重绘所有组件 
 */
function redraw_all() {
	var canvas = document.getElementById("canvas_content");
	var context = canvas.getContext("2d");
	context.save();
	context.clearRect(0, 0, 1152, 648);
	context.restore();
	for(var i = 0; i < all.length; i++) {
		var t = all[i];
		t.draw();
	}
}

